<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery 选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .highlight { background-color: yellow; }
    </style>
</head>
<body>
    <h1 id="testH1">你好</h1>
    <div id="myDiv1">id选择器1<span>span中的内容</span></div>
    <div id="mydiv2" class="blue">元素选择器</div>
    <span class="blue">样式选择器</span>

    <script>
        // 基础选择器
        /*
         1.id选择器 #id属性值 $("#id属性值") 选择id为指定的元素对象 如果有同名id则以第一个为准)
         2.class选择器 .class属性值 ($(".class属性值") 选择所有class为指定的元素对象)
         3.标签选择器 标签名 ($("标签名") 选择所有指定标签名的元素对象)
         4.通配符选择器 ($("*") 选择所有元素对象)
         5.分组选择器 ($("选择器1,选择器2,选择器3") 选择所有指定选择器中的元素对象)
         6.子元素选择器($("父元素选择器>子元素选择器") 选择所有父元素)
        */

        // 1. ID 选择器
        // 选择 id 为 testH1 的元素
        $("#testH1").css("color", "red");
        console.log("ID 选择器: ", $("#testH1"));

        // 2. Class 选择器
        // 选择所有 class 为 blue 的元素
        $(".blue").css("font-weight", "bold");
        console.log("Class 选择器: ", $(".blue"));

        // 3. 标签选择器
        // 选择所有 <div> 标签
        $("div").css("border", "1px solid blue");
        console.log("标签选择器: ", $("div"));

        // 4. 通配符选择器
        // 选择页面上的所有元素
        $("*").css("outline", "1px dashed gray");
        console.log("通配符选择器: ", $("*"));

        // 5. 分组选择器
        // 选择 id 为 myDiv1 和 class 为 blue 的元素
        $("#myDiv1, .blue").css("background-color", "lightgreen");
        console.log("分组选择器: ", $("#myDiv1, .blue"));

        // 6. 子元素选择器
        // 选择 id 为 myDiv1 的直接子元素 <span>
        $("#myDiv1 > span").css("text-decoration", "underline");
        console.log("子元素选择器: ", $("#myDiv1 > span"));

        /*
        层次选择器
            后代选择器
                格式： 父元素 指定元素 （空格隔开）
                实例：$("div span") 选择所有 div 标签下的 span 标签
                选择父元素下的指定元素（包含一代 二代等）

            子元素选择器
                格式： 父元素>子元素
                实例：$("div>span") 选择所有 div 标签下的 span 标签
                选择父元素下的直接子元素（只包含一级）
            
            相邻选择兄弟元素选择器
                格式： 兄弟元素1+兄弟元素2
                实例：$("div+span") 选择所有 div 标签的下一个兄弟元素 span 标签
                选择兄弟元素（只包含一个）

            同辈选择器
                格式： 兄弟元素1~兄弟元素2
                实例：$("div~span") 选择所有 div 标签的同级兄弟元素 span 标签
                选择兄弟元素（包含多个）
        */

        // 1. 后代选择器
        // 选择所有 <div> 标签下的 <span> 标签（包括所有级别的后代）
        $("div span").css("color", "purple");
        console.log("后代选择器: ", $("div span"));

        // 2. 子元素选择器
        // 选择所有 <div> 标签下的直接子元素 <span> 标签
        $("div > span").css("font-style", "italic");
        console.log("子元素选择器: ", $("div > span"));

        // 3. 相邻兄弟元素选择器
        // 选择所有 <div> 标签的下一个兄弟元素 <span> 标签
        $("div + span").css("text-transform", "uppercase");
        console.log("相邻兄弟元素选择器: ", $("div + span"));

        // 4. 同辈选择器
        // 选择所有 <div> 标签的同级兄弟元素 <span> 标签
        $("div ~ span").css("font-size", "20px");
        console.log("同辈选择器: ", $("div ~ span"));
    </script>
</body>
</html>